<!-- 店铺数据界面，选择时间类型组件 -->
<template>
	<view class="date-select">
		<!-- 时间类型 -->
		<view class="title">
			<view class="left">
				<text>时间类型</text>
			</view>
			<view class="right">
				<list-select :list="dateOption" @wen="select"></list-select>
			</view>
		</view>
		<!-- 更新时间 -->
		<view class="title">
			<view class="left">
				<text v-if="needRealTime && selected == 0">更新时间</text>
				<text v-else>日期选择</text>
			</view>
			<view class="right">
				<view class="real-time" v-if="needRealTime && selected == 0">
					<!-- timeFormat会报错，不影响使用 -->
					<!-- 今日 {{$u.timeFormat(timestamp, 'hh:MM')}} -->实时
				</view>
				<view class="day" v-if="(needRealTime && selected == 1) ||  (!needRealTime && selected == 0)">
					日
				</view>
				<view class="week" v-if="(needRealTime && selected == 2) ||  (!needRealTime && selected == 1)">
					周
					<date-select-mask :type = "0"></date-select-mask>
				</view>
				<view class="month" v-if="(needRealTime && selected == 3) ||  (!needRealTime && selected == 2)">
					月
					<date-select-mask :type= "1"></date-select-mask>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import listSelect from 'pages/home/data-manage/components/list-select/list-select.vue'
	import dateSelectMask from 'pages/home/data-manage/components/date-select-mask/date-select-mask.vue'
	export default {
		name:'date-select',
		components:{
			listSelect,
			dateSelectMask
		},
		data() {
			return {
				dateOption:　[],　　　　　　　//时间类型选项列表
				selected: 0					//被选中选项，默认0
			}
		},
		props:{
			needRealTime: {        //是否需要实时选项
				type: Boolean,
				default: false
			},
		},
		created() {
			//通过判断是否需要实时选项来确定数组
			this.dateOption = this.needRealTime ?  ['实时','日','周','月'] : ['日','周','月']
		},
		methods: {
			//　选择时间类型
			select(e){
				this.selected = e
			},
			
		}
	}
</script>

<style scoped lang="scss"> 
	.title{
		display: flex;
		margin: 40rpx 0;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 13px;
		color: #9e9e9e;
		.left{
			width: 140rpx;
		}
		.right{
			display: flex;
			align-items: center;
			margin-left: 20rpx;
		}
	}
</style>
